<template>
  <div class="video_wrap">
    <video class="my-video" width="100%" autoplay muted loop playsinline v-if="title === 'AI Pose'">
      <source src="../assets/videos/aipose.webm" type="video/webm">
    </video>
    <video class="my-video" width="100%" autoplay muted loop playsinline v-else>
      <source src="../assets/videos/remove.webm" type="video/webm">
    </video>
    <div class="remove" :style="{ left: title === 'AI Pose' ? 'calc(50% - 65px)' : 'calc(50% - 110px)' }">{{ title }}
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true,
  }
});
</script>

<style scoped lang="less">
.video_wrap {
  width: 100%;
  height: 190px;
  position: relative;
  overflow: hidden;
  text-align: center;

  img {
    max-width: 100%;
    /* 限制最大宽度为容器宽度 */
    max-height: 100%;
    /* 限制最大高度为容器高度 */
    width: auto;
    /* 保持原始宽度比例 */
    height: auto;
    /* 保持原始高度比例 */
    object-fit: contain;
    /* 保持比例，完整显示图片 */
  }

  .remove {
    height: 39px;
    line-height: 39px;
    text-align: center;
    font-family: Inter, Inter;
    font-weight: 900;
    font-size: 32px;
    color: #ffffff;
    text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.35);
    position: absolute;

    bottom: 8px;
  }
}
</style>
